<template>
  <div class="deviceDetailManage">
    <div class="mainBox" ref="mainBox">
      <div>
         <div class="detail">
          <div class="baseInfo" style="color: #fff">基本信息</div>
          <div class="deviceName">设备名称 <span>{{deviceInfo.name}}</span></div>
          <div class="deviceCode">设备编号 <span>{{deviceInfo.code}}</span></div>
          <div class="departmentName">所在部门 <span>{{departmentName}}</span></div>
          <div class="deviceState">设备状态 
            <span v-if="deviceInfo.status == 1">正常</span>
            <span v-else-if="deviceInfo.status == 2">异常</span>
            <span v-else>-</span>
          </div>
          <div class="runOrNot">运行状态
            <span v-if="deviceInfo.runStatus == 1">无</span>
            <span v-else-if="deviceInfo.runStatus == 2">运转</span>
            <span v-else-if="deviceInfo.runStatus == 3">停止</span>
            <span v-else-if="deviceInfo.runStatus == 4">故障</span>
            <span v-else-if="deviceInfo.runStatus == 5">离线</span>
            <span v-else>-</span>
          </div>
        </div>
         <div style="border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:5px;" class="docCheckRecord">
          <div class="baseInfo">点巡检记录</div>
          <button-tab>
            <button-tab-item selected  @on-item-click="changeTab('设备点巡检')">设备点巡检</button-tab-item>
            <button-tab-item  @on-item-click="changeTab('部件点巡检')">部件点巡检</button-tab-item>
          </button-tab>
          <!-- 设备点巡检 -->
          <x-table 
            v-if="dotCheckDeviceComponent" 
            class="tab-swiper vux-center" 
            :cell-bordered="false" 
            :full-bordered="false" 
            :content-bordered="true" 
            style="background-color:#22233f;">
            <thead>
              <tr>
                <th style="text-align:left">设备名称</th>
                <th style="width:130px;" @click="leapfrogSort('update_time', sort1)">最后点巡检时间 <font-awesome-icon :icon="['fa','sort']" size="lg" /></th>
                <th>执行人</th>
                <th style="text-align:right;">结果</th>
              </tr>
            </thead>

            <tbody>
              <tr v-for="(record,index) in deviceDotCheck" :key="index" @click="deviceWorkSheetDetail(record)">
                <td style="text-align:left;">{{record.name}}</td>
                <td v-if="record.operatorTime">{{record.operatorTime | formatDate}}</td>
                <td v-else></td>
                <td>{{record.operator}}</td>
                <td style="text-align:right;">{{record.checkResult == 1?'正常':record.checkResult == 2?'轻度故障':record.checkResult == 3?'中度故障':record.checkResult == 4?'重故障':""}}</td>
              </tr>
            <tr class="openmore">
              <td @click="toDeviceDotCheck()" class="slideMore"><span style="color: #3967DC">查看更多</span></td>
            </tr>
            </tbody>
          </x-table>
          <!-- 部件点巡检 -->
          <x-table v-if="dotCheckDeviceComponent == false" class="tab-swiper vux-center" :cell-bordered="false" :full-bordered="false" :content-bordered="true" style="background-color:#22233f;">
            <thead>
              <tr>
                <th style="text-align:left;">部件名称</th>
                <th style="width:130px;" @click="leapfrogSort('update_time', sort1)">最后点巡检时间 <font-awesome-icon :icon="['fa','sort']" size="lg" /></th>
                <th>执行人</th>
                <th style="text-align:right;">结果</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(record,index) in componentDotCheck" :key="index" @click="compWorkSheetDetail(record)">
                <td style="text-align:left;">{{record.name}}</td>
                <td v-if="record.operatorTime">{{record.operatorTime | formatDate}}</td>
                <td v-else></td>
                <td>{{record.operator}}</td>
                <td style="text-align:right;">{{record.checkResult == 1?'正常':record.checkResult == 2?'轻度故障':record.checkResult == 3?'中度故障':record.checkResult == 4?'重故障':""}}</td>
              </tr>
              <tr class="openmore">
                <td @click="toComponentDotCheck()"  class="slideMore"><span style="color: #3967DC">查看更多</span></td>
              </tr>
            </tbody>
          </x-table>

        </div>
        <div style="border-bottom:1px solid rgba(255,255,255,0.5);padding-bottom:5px;" class="replaceRecord">
          <div class="baseInfo">更换记录</div>
          <button-tab>
            <button-tab-item selected  @on-item-click="changeTab('设备更换记录')">设备更换记录</button-tab-item>
            <button-tab-item  @on-item-click="changeTab('部件更换记录')">部件更换记录</button-tab-item>
          </button-tab>
          <x-table v-if="replaceDeviceComponent" class="tab-swiper vux-center" :cell-bordered="false" :full-bordered="false" :content-bordered="true" style="background-color:#22233f;">
            <thead>
              <tr>
                <th style="text-align:left;">设备名称</th>
                <th>设备编号</th>
                <th @click="leapfrogSort2('update_time', sort2, 2)">更换时间 <font-awesome-icon :icon="['fa','sort']" size="lg" /></th>
                <th style="text-align:right;">执行人</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(record,index) in deviceReplace" :key="index" @click="deviceReplaceRecordDetail(record)">
                <td style="text-align:left;">{{record.name}}</td>
                <td>{{record.code}}</td>
                <td style="width:150px;">{{record.update_time | formatDate}}</td>
                <td style="text-align:right;">{{record.operatorName}}</td>
              </tr>
              <tr class="openmore">
               
                <td @click="toDeviceReplaceList" class="slideMore"><span style="color: #3967DC">查看更多</span></td>
              </tr>
            </tbody>
          </x-table>
          <x-table v-if="replaceDeviceComponent == false" class="tab-swiper vux-center" :cell-bordered="false" :full-bordered="false" :content-bordered="true" style="background-color:#22233f;">
            <thead>
              <tr>
                <th style="text-align:left;">部件名称</th>
                <th style="text-align:left;">部件编号</th>
                <th @click="leapfrogSort2('update_time', sort2, 2)">更换时间 <font-awesome-icon :icon="['fa','sort']" size="lg" /></th>
                <th style="text-align:right;">执行人</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(record,index) in componentReplace" :key="index" @click="compReplaceRecordDetail(record)">
                <td style="text-align:left;">{{record.name}}</td>
                <td style="text-align:left;">{{record.code}}</td>
                <td style="width:150px;">{{record.update_time | formatDate}}</td>
                <td style="text-align:right;">{{record.operator}}</td>
              </tr>
              <tr class="openmore">
                <td style="position:relative;left:130px;" @click="toComponentReplaceList" class="slideMore"><span style="color: #3967DC">查看更多</span></td>
              </tr>
            </tbody>
          </x-table>
        </div>
         <div class="docCheckRecord">
          <div class="baseInfo" style="font-size: 0.373333rem;">运行记录</div>
          <x-table
            class="tab-swiper vux-center"
            :cell-bordered="false"
            :full-bordered="false"
            :content-bordered="true"
            style="background-color:#22233f;">
            <thead>
          
            </thead>
            <tbody style="width:100vh;">
              <tr style="width:100vh;">
                  <!-- 运行记录详细信息 -->
                  <td class="runStatsBox">
                    <div class="runStats" v-for="(item,index) in runList" :key="index">
                      <div class="runPic">
                        <img src="../../assets/svg/tip.svg" alt="">
                        <div class="runIndex">{{index +1}}</div>
                      </div>
                      <div class="status">
                        <span v-if="item.status==1">无</span>
                        <span v-if="item.status==2">运转</span>
                        <span v-if="item.status==3">停止</span>
                        <span v-if="item.status==4">故障</span>
                        <span v-if="item.status==5">离线</span>
                      </div>
                      <div class="runTime">
                          <span class="beginTime" ref="beginTime">{{item.startTime}}</span>-<span class="endTime" ref="endTime">{{item.endTime}}</span>
                      </div>
                      <div class="time">
                        <span>{{item.durationRespDTO}}</span>
                      </div>
                    </div>
                  </td>            
              </tr>
            </tbody>
          </x-table>
        </div>
        <div class="detail" >
          <div class="baseInfo" style="color: #fff">绑定设备采集点</div>
          <!-- <div class="flex" style="padding: border-bottom:1px solid rgba(255,255,255,0.5); 0;padding-bottom:5px;"  v-for="(item,index) of monitorDeviceList" :key="index"> -->
          <div class="flex" style="padding: 0;border-bottom:1px solid rgba(255,255,255,0.5); padding-bottom:5px;"  v-for="(item,index) of monitorDeviceList" :key="index">
            <div class="flex-1">
              <div>采集点编码</div>
              <div style="color: white">{{item.monitorDeviceCode}}</div>
            </div>
            <div class="flex-1">
              <div>采集点类型</div>
              <div style="color: white">{{item.monitorDeviceType==1?'启停':item.monitorDeviceType==2?'故障':item.monitorDeviceType==3?'模拟量':''}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <shortcut-menu></shortcut-menu> -->
  </div>
</template>

<style scoped lang="less">
*{
  padding: 0;
  margin: 0;
}
tr,td{
  padding: 0;
  margin: 0;
}
  #app, .content{
    width: 100% !important;
    height: 100% !important;
  }
  .deviceDetailManage{
    position: fixed;
    height: 100%;
    width: 100%;
    background: #22233f;
    padding: 0 3%;
    padding-bottom: 20px;
    color: #fff
  }
  .device-selected{height: 50px}

  .mainBox{
    height: 90%;
    margin-top: 10px;
    // overflow: hidden;
    width: 100%;
    color: #fff;
  }
  .detail{
    // border-bottom: 1px rgba(255,255,255,0.5) solid;
    padding-bottom: 15px;
    margin-bottom: 15px;
    .flex{
      display: flex;
      .flex-1{
        text-align: center;
        flex: 1;
      }
    }
  }
  .detail div{
    color: rgba(255,255,255,0.5);
    font-size: 14px;
    padding: 10px 0;
    // margin: 0 10px;
  }
  .detail div span{
    margin-left: 30px;
    color: #ffffff;
  }

  .baseInfo{
    padding-left: 10px;
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 16px !important;
  }

  .vux-button-group{
    width: 260px !important;
    margin: 0 auto 15px;
    background-color: #22233f;
/*     border: 1px solid #456de6;
    border-radius:16px; */
  }
  .vux-button-group > a.vux-button-group-current{
    background: #3967DC!important;
  }
  .vux-button-group > a{
    color:#ffffff;
    background-color:transparent;
  }
  .vux-button-group > a.vux-button-tab-item-first:after, .vux-button-group > a.vux-button-tab-item-last:after{border: 1px solid #456de6;}

  .vux-table{
    width:100%;
  }
  .vux-table:after{border: none !important;}
  .openmore td:before{border: none !important;}
  .openmore>td{
    position:relative;
    left:37%;
  }

  .flex-demo {
    text-align: center;
    color: #fff;
    background-color: #323465;
    border-radius: 4px;
    background-clip: padding-box;
    height: 125px;
  }
  .flex-demo img{
      width: 40px;
      height: 40px;
      margin-bottom: 5px;
    }
  .flex-demo .lineImg1{
      margin-top: 35px;
    }
  .flex-demo .lineImg2{
      margin-top: 20px;
    }

  table{
    width: 100%;
    table-layout:fixed;
  }

  table td{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  .runStatsBox{
    width: 100vh;
    padding: 0 10px;
      .runStats{
        position: relative;
        width: 100vh;
        height: 50px;
        padding: 0 0 !important;
        background: url("../../../static/img/bg.png") no-repeat;
        background-position: center;
        background-color: #18182c;
        margin-bottom: 10px;
        overflow: hidden;
      .runPic{
        position: relative;
        top: -6px;
        width: 33px;
        height: 33px;
        img{
          width: 100%;
        }
        .runIndex{
          position: absolute;
          top: -5px;
          left: 13px;
        }
      }
      .time{
        position: relative;
        top: -28px;
        right: -13px;
      }
      @media screen and(min-width:320px) and (max-width:320px){
        .time{
          position: relative !important;
          top: -28px !important;
          right:-6% !important;
        }
      }
      .runTime{
        position: absolute;
        top: 15px;
        left: 10px;
        width: 100%;
        padding: 0 !important;
        text-align: left;
      }
      .status{
        position: absolute;
        top: -9px;
        left: 39px;
      }
    }
  }

  @media screen and (max-width: 320px) {
    .runTime{
      font-size: 12px;
    }
  }
</style>

<script>
  import BScroll from "better-scroll";
  import { XDialog, TransferDomDirective as TransferDom, XTable, LoadMore,XButton,Toast,ButtonTab, ButtonTabItem,Flexbox, FlexboxItem } from 'vux';
  import ShortcutMenu from "../../components/common/shortcut_menu.vue";
import { Privilege } from "@/mixin";

  export default {
    components: {
      XDialog,
      XTable,
      LoadMore,
      XButton,
      Toast,
      ButtonTab,
      ButtonTabItem,
      Flexbox,
      FlexboxItem,
      BScroll,
      ShortcutMenu,
    },
    name: "deviceDetailManage",
    directives: {
      TransferDom
    },
    data (){
      return {
        //多选状态
        status: false,
        deviceId: '',
        deviceDetail: {},
        show: false,
        checkList: [],
        toastShow: false,
        toastText: null,
        //edit by xu
        deviceMessage: {},
        deviceComponent: [],
        deviceDotCheck:[],
        componentDotCheck: [],
        //点巡检 默认为展示设备
        dotCheckDeviceComponent: true,
        //更换 默认为展示设备
        replaceDeviceComponent: true,
        show4: false,
        deviceReplace:[],
        componentReplace: [],
        sort1: false,
        sort2: false,
        sort3: false,
        sortType: 'changeTime',
        nowselect1: 'left',
        nowselect2: 'left',
        deviceInfo:{},
        departmentName:'',
        monitorDeviceCode:'',
        monitorDeviceType:'',
        monitorDeviceList:'',
        runList:[],
        time:"",
      }
    },
    watch:{
      // deviceId:function(){
      //   if(this.deviceId){
      //    this.getDeviceCode();
      //   }
      // }
    },
    mixins:[Privilege],
    created() {
        this.deviceDetail = this.$route.query.deviceInfo;
        if(this.deviceDetail.deviceId){
          this.deviceId = this.deviceDetail.deviceId;
        }else if(this.deviceDetail.device_id){
          this.deviceId = this.deviceDetail.device_id;
        }
        if(this.deviceDetail.departmentName){
          this.departmentName = this.deviceDetail.departmentName;
        }else if(this.deviceDetail.department_name){
          this.departmentName = this.deviceDetail.department_name;
        }
        this.getDeviceCode();
        this.getDeviceInfo();
        this.getDeviceComponentDetail();
        this.getRunList()

    },
    methods: {
      //累计时间
      getTime(minutes){
        let newTime;
        if(minutes < 60){
          newTime = parseFloat(minutes).toFixed(0) + '分钟';
        }else if(minutes >60 && minutes/60 < 24 ){
          newTime = parseFloat(minutes/60).toFixed(0)+ '小时';
        }else if(minutes/60 > 24){
          newTime = parseFloat(minutes/60/24).toFixed(0) + '天';
        };
        return newTime;
      },
      //获取设备信息的模版编码
      getDeviceCode(){
        this.$http(this.$API.getDeviceCode,{deviceId:this.deviceId},true).then((res) => {
          console.log(res);
          if(res){
            this.monitorDeviceList=res
            // this.monitorDeviceCode=res.monitorDeviceCode
            // this.monitorDeviceType=res.monitorDeviceType
          }
        });
      },
      //运行记录列表
      getRunList(){
        let param={
          deviceCode:this.deviceInfo.code
        };
        this.$http(this.$API.getRunList,param,true).then( (res) => {
          console.log(res);
          if(res){
            res.forEach(item=>{
              if (item.status === 1) {
              item.statusName = '无'
            } else if (item.status === 2) {
              item.statusName = '运行'
            } else if (item.status === 3) {
              item.statusName = '停止'
            }else if(item.status === 4){
              item.statusName = '故障'
            }else if(item.status === 4){
              item.statusName = '离线'
            }
              item.durationRespDTO = this.getTime(item.durationRespDTO.minutes)
            })
            this.runList = res;
        }
        });
      },
        //获取设备部件
      getDeviceComponentDetail: function(){
        let that = this;
        this.$http(this.$API.listDeviceComponent + '/' + this.deviceId,{},true).then( (res) => {
          if(res){
            that.deviceComponent = res;
          }
        });
        //当前设备的点巡检记录
        this.$http(this.$API.loadDeviceCheckRecordByDeviceId,{deviceId:this.deviceId},true).then( (res) => {
          if(res){
            if(res.length >3){
              res=res.slice(0,3)
            }
          that.deviceDotCheck = res
          }
        });
        //当前设备的更换记录
        this.$http(this.$API.loadDeviceAllReplaceRecord,{deviceId:this.deviceId},true).then( (res) => {
          if(res){
            if(res.length >3){
              res=res.slice(0,3)
            }
          that.deviceReplace = res
          }
        });
        //当前设备下所有部件的点巡检记录
        this.$http(this.$API.loadComponentCheckRecord,{deviceId:this.deviceId},true).then( (res) => {
          if(res){
            if(res.length >3){
              res=res.slice(0,3)
            }
            that.componentDotCheck = res
          }
        });
        //当前设备下所有部件的更换记录
        this.$http(this.$API.loadCompReplaceRecord,{deviceId:this.deviceId},true).then( (res) => {
          if(res){
            if(res.length >3){
              res=res.slice(0,3)
            }
          that.componentReplace = res
          }
        });
      },
      //设备更换记录
      toDeviceReplaceList: function(){
        this.$router.push({name: 'deviceReplaceList',query: {deviceId: this.deviceId}});
      },
      //部件更换记录
      toComponentReplaceList: function(){
        this.$router.push({name: 'componentReplaceList',query: {deviceId: this.deviceId}});
      },

      // 获取设备信息
      getDeviceInfo: function(){
        this.$http(this.$API.getDeviceDetail,{deviceId:this.deviceId},true).then((data)=>{
          this.deviceInfo = data;
          this.getRunList()
        })
      },

      //显示
      replaceShow() {
        this.show = true
        this.preventBodyScroll(true)
      },
      //关闭
      replaceHide() {
        this.show = false
        this.preventBodyScroll(false)
      },
      //阻止底部滚动
      preventBodyScroll(type) {
        let deviceDetailManage = document.querySelector('.deviceDetailManage')
        if(type) {
          deviceDetailManage.style.height = '100vh'
          deviceDetailManage.style['overflow-y'] = 'hidden'
        } else {
          deviceDetailManage.style['min-height'] = '100vh'
          deviceDetailManage.style['overflow-y'] = 'auto'
        }
      },
      //一键更换
      replace: function(){


        let manageStatus = this.privilege('wechat_manage','一键更换');


        if(!manageStatus){
          this.$commom.alert('您没有权限一键更换');
          return;
        }

        let array = [];
        for(let i=0; i<this.deviceComponent.length; i++){
          if(this.deviceComponent[i].status){
            array.push(this.deviceComponent[i].configId);
          }
        }
        if(array.length <= 0){
          this.toastShow = true
          this.toastText = '请选择部件'
          return;
        }
        let str = array.join(',');
        let that = this;
        this.$http(this.$API.onekeyReplace,{configIds: str},true,that.resetStatus).then( (res) => {
          if(res){
            this.show = false
            this.preventBodyScroll(false)
            that.$commom.alert(res,true);
            that.resetStatus();
          }
        });
      },
      //选择部件
      select: function(index){
        if(this.deviceComponent[index].status){
          this.$set(this.deviceComponent[index],'status',false);
        }else{
          this.$set(this.deviceComponent[index],'status',true);
        }
      },
      //添加更换记录
      toAddReplace: function(data){
        
        let status = this.privilege('wechat_operaionManage','wechat_operaionManage:save:change');


        if(status){
          this.$store.commit('saveComponentData',data)
          this.$store.commit('saveDeviceComponent',this.deviceComponent);
          this.$router.push({name: 'addReplace'});
        }else{
          this.$commom.alert('您没有权限添加更换记录');
        }
      },
      //重置部件选中状态
      resetStatus: function(){
        const list = this.deviceComponent;
        for(var i=0; i<list.length; i++){
          list[i].status = false;
        }
        this.deviceComponent = list;
      },
       //入库管理
      inventJump:function(){

    		this.$router.push({name:'inventoryManage',query:{id:this.deviceId}})
      },
      //切换点巡检信息和更换记录信息
      changeTab: function(index){
        if (index == '设备点巡检'){
          this.dotCheckDeviceComponent = true;
          this.nowselect1 = 'left';
        }else if (index == '部件点巡检'){
          this.dotCheckDeviceComponent = false;
          this.nowselect1 = 'right';
        }else if(index == '设备更换记录'){
          this.replaceDeviceComponent = true;
          this.nowselect2 = 'left';
        }else if(index == '部件更换记录'){
          this.replaceDeviceComponent = false;
          this.nowselect2 = 'right';
        }
      },
      showVuePopup4(flag) {
        this.show4 = flag;
      },
      //点击跳转到设备点巡检页面
      toDeviceDotCheck: function () {
        this.$router.push({name: 'deviceCheckRecord',query: {deviceId: this.deviceId}});
      },
      //点击跳转到部件点巡检页面
      toComponentDotCheck: function () {
        this.$router.push({name: 'componentCheckRecord',query: {deviceId: this.deviceId}});
      },
      leapfrogSort(type, sorted) {
        if (sorted === false) {
          this.sort1 = true;
          this.sortType = type;
          if (this.nowselect1 === 'left'){
            this.deviceDotCheck.sort(this.compare(type));
          }else{
            this.componentDotCheck.sort(this.compare(type));
          }

        }else{
          this.sort1 = false;
          this.sortType = type;
          if (this.nowselect1 === 'left'){
            this.deviceDotCheck.sort(this.compare2(type));
          }else{
            this.componentDotCheck.sort(this.compare2(type));
          }
        }

      },
      leapfrogSort2(type, sorted, sortnumber) {
        if (sortnumber === 2){
          if (sorted === false) {
            this.sort2 = true;
            this.sortType = type;
            if(this.nowselect2 === 'left'){
              this.deviceReplace.sort(this.compare(type));
            }else{
              this.componentReplace.sort(this.compare(type));
            }
          }else{
            this.sort2 = false;
            this.sortType = type;
            if(this.nowselect2 === 'left'){
              this.deviceReplace.sort(this.compare2(type));
            }else{
              this.componentReplace.sort(this.compare2(type));
            }
          }
        }else {
          if (sorted === false) {
            this.sort3 = true;
            this.sortType = type;
            if(this.nowselect2 === 'left'){
              this.deviceReplace.sort(this.compare(type));
            }else{
              this.componentReplace.sort(this.compare(type));
            }
          }else{
            this.sort3 = false;
            this.sortType = type;
            if(this.nowselect2 === 'left'){
              this.deviceReplace.sort(this.compare2(type));
            }else{
              this.componentReplace.sort(this.compare2(type));
            }
          }
        }
      },
      compare(attr) {
        return function(a,b){
           var x = a[attr];
           var y = b[attr];
           return ((x>y)?-1:(x<y)?1:0)
        }
      },
      compare2(attr) {
        return function(a,b){
           var x = a[attr];
           var y = b[attr];
           return ((x<y)?-1:(x>y)?1:0)
        }
      },

      deviceWorkSheetDetail:function(config){
        this.$router.push({
          name: `workSheetDetail`,
          query: {
            CheckInfo:config,
            queryName: true,
            name: 'deviceRecord'
          }
        })
      },

      compWorkSheetDetail:function(config){
        this.$router.push({
          name: `workSheetDetail`,
          query: {
            CheckInfo:config,
            queryName: true,
            name: 'componentRecord'
          }
        })
      },

      deviceReplaceRecordDetail: function(record){
        this.$router.push({
          name:'replaceDetail',
          query:{
            component:'',
            device:record,
            deviceId:this.deviceId,
            type:'device'
          }
        })
      },

      // 查看更换记录详情
      compReplaceRecordDetail: function(config){
        this.$router.push({
            name:'replaceDetail',
            query:{
              component:config,
              device:this.deviceInfo,
              deviceId:this.deviceId,
              type:'component'
            }
        })
      },
    },
    mounted(){
         this.$nextTick(() => {
            this.Scroll = new BScroll(this.$refs.mainBox,{click: true, tap: true});
        })
    },
  }
</script>
